import React, { useState, useEffect } from 'react'
import { Button, Form, Input } from 'antd';


const Company = ({ securityMsg }) => {


    const [form] = Form.useForm();

    const [Offlineflag, setOfflineflag] = useState(false)

    const [updateflag, setUpdateflag] = useState(true)

    useEffect(() => {
        if (securityMsg && Object.keys(securityMsg).length > 0) {
            localStorage.setItem('securityMsg', JSON.stringify(securityMsg))
            form.setFieldsValue({
                name: securityMsg.name,
                ID: securityMsg.ID,
                validity: securityMsg.validity
            });
        }
    }, [securityMsg, form]);

    return (
        <div style={{ marginTop: '3vh' }}>

            <div
                style={{ fontSize: '20px', fontWeight: '550', margin: "30px" }}
            >公司参数</div>

            <Form
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 650 }}
                autoComplete="off"
                form={form}
            >
                <Form.Item
                    label="公司名称"
                    name="name"
                    rules={[{ required: !updateflag, message: '请输入公司名称!' }]}
                >
                    <Input disabled={updateflag} />
                </Form.Item>

                <Form.Item
                    label="公司ID"
                    name="ID"

                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="有效期"
                    name="validity"

                >
                    <Input />
                </Form.Item>
                {
                    Offlineflag && <Form.Item
                        label="离线延期码"
                        name="offcode"
                        rules={[{ required: true, message: '请输入离线延期码!' }]}
                    >
                        <Input placeholder='输入离线延期码' />
                    </Form.Item>

                }
                <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        在线延期
                    </Button> &emsp;

                    {Offlineflag && <Button style={{ backgroundColor: "#67c23a", marginRight: 10, color: "#fff" }} htmlType="submit">离线延期</Button>}
                    <Button htmlType="submit"
                        onClick={() => setOfflineflag(!Offlineflag)}
                        type={Offlineflag ? 'danger' : 'primary'}
                    >
                        {Offlineflag ? '取消延期' : '离线延期'}
                    </Button>&emsp;
                    {!updateflag && <Button style={{ backgroundColor: "#67c23a", marginRight: 10, color: "#fff" }} htmlType="submit">确认修改</Button>}
                    <Button type={!updateflag ? 'danger' : 'primary'} htmlType="submit"
                        onClick={() => {
                            setUpdateflag(!updateflag)
                            if (!updateflag) {
                                form.setFieldsValue({
                                    name: securityMsg.name
                                });
                            } else {
                                form.setFieldsValue({
                                    name: ''
                                });

                            }

                        }

                        }>
                        {updateflag ? '改公司名称' : '取消修改'}
                    </Button>

                </Form.Item>
            </Form>
        </div>
    )
}

export default Company